<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			
		}
		body{
			background: url(img/背景1.jpg);
			background-size: cover;
		}
		#box ul li img{
			width: 100px;
			height: 100px;
			
		}
		#box ul{
			display: flex;
			align-items: center;
			justify-content: space-around;
			cursor: pointer;
		}
		
	</style>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/背景1.jpg" /></li>
				<li><img src="img/背景2.jpg" /></li>
				<li><img src="img/背景3.jpg" /></li>
				<li><img src="img/背景4.jpg" /></li>
			</ul>
			</ul>
		</div>
	</body>
	<script>
		window.onload = function(){
			var box = document.getElementById("box");
			var alllist = document.getElementsByTagName("li");
			
			for(var i=0;i<alllist.length;i++){
				var a = alllist[i];
				a.index = i+1;
				console.log("a.index")
				a.onclick = function(){
					document.body.style.background = 'url("img/背景'+this.index+'.jpg") ';
				
				}}
				
				
		}
		
	</script>
</html>
